<template>
  <comment-card :title="'今日用戶交易数'" :value="'1,087,503'">
    <template #default>
      <v-chart :option="options" ></v-chart>
<!--      <div id="usersChart" style="width: 100%;height: 100%"></div>-->
    </template>
    <template #footer>
      <div class="compare-wrapper">
        <div class="compare">
          <span>日同比</span>
          <span class="emphasis">7.33%</span>
          <div class="increase"></div>
        </div>
        <div class="compare">
          <span>月同比</span>
          <span class="emphasis">7.33%</span>
          <div class="decrease"></div>
        </div>
      </div>
    </template>
  </comment-card>
</template>

<script>
import commentCardMixin from './mixins/commentCardMixin'

export default {
  name: 'TotalUsers',
  mixins: [commentCardMixin],
  mounted() {
    // const chartDom = document.getElementById('usersChart')
    // const chart = this.$echarts.init(chartDom)
    // chart.setOption(
    //   {
    //   grid: {
    //     top: 0,
    //     bottom: 0,
    //     left: 0,
    //     right: 0
    //   },
    //   xAxis: {
    //     type: 'value',
    //     show: false
    //   },
    //   yAxis: {
    //     type: 'category',
    //     show: false
    //   },
    //   series: [
    //     {
    //       type: 'bar',
    //       stack: '总量',
    //       data: [250],
    //       barWidth: '10',
    //       itemStyle: {
    //         color: '#45c946'
    //       }
    //     },
    //     {
    //       type: 'bar',
    //       stack: '总量',
    //       data: [666],
    //       itemStyle: {
    //         color: '#eee'
    //       }
    //     },
    //     {
    //       type: 'custom',
    //       stack: '总量',
    //       data: [250],
    //       renderItem: (params, api) => {
    //         const value = api.value(0)
    //         const endPoint = api.coord([value, 0])
    //         return {
    //           type: 'group',
    //           position: endPoint,
    //           children: [
    //             {
    //               type: 'path',
    //               shape: {
    //                 d: 'M1024 255.996 511.971 767.909 0 255.996 1024 255.996z',
    //                 x: -5,
    //                 y: -20,
    //                 width: 10,
    //                 height: 10,
    //                 layout: 'cover'
    //               },
    //               style: {
    //                 fill: '#45c946'
    //               }
    //             },
    //             {
    //               type: 'path',
    //               shape: {
    //                 d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z',
    //                 x: -5,
    //                 y: 10,
    //                 width: 10,
    //                 height: 10,
    //                 layout: 'cover'
    //               },
    //               style: {
    //                 fill: '#45c946'
    //               }
    //             }]
    //         }
    //       }
    //     }
    //   ]
    // }
    // )
  },
  data() {
    return {
    options: {
      grid: {
        top: 0,
          bottom: 0,
          left: 0,
          right: 0
      },
      xAxis: {
        type: 'value',
          show: false
      },
      yAxis: {
        type: 'category',
          show: false
      },
      series: [
        {
          type: 'bar',
          stack: '总量',
          data: [250],
          barWidth: '10',
          itemStyle: {
            color: '#45c946'
          }
        },
        {
          type: 'bar',
          stack: '总量',
          data: [666],
          itemStyle: {
            color: '#eee'
          }
        },
        {
          type: 'custom',
          stack: '总量',
          data: [250],
          renderItem: (params, api) => {
            const value = api.value(0)
            const endPoint = api.coord([value, 0])
            return {
              type: 'group',
              position: endPoint,
              children: [
                {
                  type: 'path',
                  shape: {
                    d: 'M1024 255.996 511.971 767.909 0 255.996 1024 255.996z',
                    x: -5,
                    y: -20,
                    width: 10,
                    height: 10,
                    layout: 'cover'
                  },
                  style: {
                    fill: '#45c946'
                  }
                },
                {
                  type: 'path',
                  shape: {
                    d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z',
                    x: -5,
                    y: 10,
                    width: 10,
                    height: 10,
                    layout: 'cover'
                  },
                  style: {
                    fill: '#45c946'
                  }
                }]
            }
          }
        }
      ]
    }
    }
  }
}
</script>

<style lang="scss" scoped>
.compare-wrapper {
  display: flex;

  .compare {
    display: flex;
    margin-right: 12px;
  }
}
</style>

<svg t="1622476042550" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5125" width="200" height="200"><path d="M128 288l384 448 384-448H128z" p-id="5126"></path></svg>
